<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>EC考控系统</title>
		<link rel="shortcut icon" href="<%=request.getContextPath()%>/static/common/images/favicon.ico" type="image/x-icon">
		<link href="<%=request.getContextPath()%>/static/common/vendor/jquery-easyui-1.5/themes/bootstrap/easyui.css" rel="stylesheet"/>
		<link href="<%=request.getContextPath()%>/static/common/vendor/jquery-easyui-1.5/themes/icon.css" rel="stylesheet"/>
		<script src="<%=request.getContextPath()%>/static/common/vendor/jquery-easyui-1.5/jquery.min.js"></script>
		<script src="<%=request.getContextPath()%>/static/common/vendor/jquery-easyui-1.5/jquery.easyui.min.js"></script>
		<script src="<%=request.getContextPath()%>/static/common/vendor/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north'" style="height:50px"></div>
	<div data-options="region:'south',split:true" style="height:50px;"></div>
	<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
	<div data-options="
	region:'west',
	split:true,
	title:'菜  单'" style="width:200px">
		<ul id="nav"></ul>
	</div>
	<div data-options="region:'center',noheader: true">
		<div id="tabs">
			   <div title="欢迎页" style="padding:10px;" data-options="
			   iconCls:'icon-tip'">
				  Hello World...
			   </div>
		</div>
	</div>
	
	<div id="tabMenu" class="easyui-menu">
		    <div data-options="
		    name:'refresh'">
		    	刷新
		    </div>
		    <div data-options="
		    name:'closeCurrent'">
		    	关闭当前
		    </div>
		    <div data-options="
		    	name:'closeOther'">
		    	关闭其它
		    </div>
		    <div data-options="
		    name:'closeAll'">
		    	关闭全部
		    </div>
		</div>
	
	<script>
		var main = {
				init:function(){
					main.nav = $('#nav');
					main.tabs = $('#tabs');
					main.tabMenu = $('#tabMenu');
					
					main.nav.tree({
						url:'<%=request.getContextPath()%>/TestServlet?command=listMenu',
						lines:true,
						onLoadSuccess:function(node,data){
							main.nav.tree('expandAll');
						},
						onClick:function(node){
							if(node.url){
								if(main.tabs.tabs('exists',node.text)){
									main.tabs.tabs('select',node.text);
								}else{
									main.tabs.tabs('add',{
										title:node.text,
										iconCls:node.iconCls,
										closable:true,
										href:node.url
									});
								}
							}
						}	
					});
					 // 初始化tab，并创建右键菜单
					main.tabs.tabs({
						border: false,
						fit: true,
			            onContextMenu: function (e, title, index) {
			                e.preventDefault();
			                if (index > 0) {
			                	main.tabMenu.menu('show', {
			                        left: e.pageX,
			                        top: e.pageY
			                    }).data("tabTitle", title);
			                }
			            }
			        });
					 // 右键菜单click
			        main.tabMenu.menu({
			            onClick: function (item) {
				            var allTabs = main.tabs.tabs('tabs');
				            var allTabtitle = [];
				            $.each(allTabs, function (i, v) {
				                var opt = $(v).panel('options');
				                if (opt.closable) {
				                    allTabtitle.push(opt.title);
				                }
				            });
				            var curTabTitle = $(this).data("tabTitle");
				            var curTabIndex = main.tabs.tabs("getTabIndex", main.tabs.tabs("getTab", curTabTitle));
				            switch (item.name) {
			                	case 'refresh':
			                    	var panel = main.tabs.tabs("getTab", curTabTitle).panel("refresh");
			                    	break;
				                case 'closeCurrent':
				                    main.tabs.tabs("close", curTabIndex);
				                    break;
				                case 'closeOther':
				                    $.each(allTabtitle, function(i, v) {
				                        if (curTabTitle != allTabtitle[i]) {
				                            main.tabs.tabs('close', allTabtitle[i]);
				                        }
				                    });
				                    main.tabs.tabs('select', curTabTitle);
				                    break; 
				                case 'closeAll':
				                    $.each(allTabtitle, function(i, v) {
				                        main.tabs.tabs('close', allTabtitle[i]);
				                    });
				                    break;
				            }
			            }
			        }); 
				}
		}
		
		$(function(){
			main.init();
		});
	</script>
</body>
</html>